<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>learning gogle code</title>

<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready 
jQuary(document).ready(function() {
    // trigger the function when clicking on an assigned element
    jQuary(".toggle").hover(function () {
        jQuary(this).next().slideToggle("fast");  
    });
});
</script>
<style type="text/css"> 
.hiddenDiv{
display:none;
}
</style>


</script>
</head>

<body>
<h1>Hello Mr. Casey</h1>
<p>I am being hosted on google code</p>
<p><em>Thank you google</em></p>
<p><img src="http://casey-one-html.googlecode.com/git/hi.jpg" title="image server by google" /></p>
<hr>
Here is content section 1
<span class="toggle"> 
<a href="#" style="cursor:pointer;">show hidden container</a>
</span>
<div class="hiddenDiv" style="border:#030 1px solid; background-color:#CEFFDB; width:350px;">
Content I want to hide then slide into view for section 1
<br /><br />
I can put any website elements I wish to in here, and style it any way I please.
</div>
<hr />
<div style="color:red">I can't pul in the jQuary library because:<br>Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</div>
</body>     
</html>

